<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <com ref="aaaa"></com>
    </div>
</body>
<script>

    const com = {
        template: '<h1>子组件</h1>',
        // 暴露给父组件的属性,如果父组件需要使用子组件的属性，则需要暴露给父组件
        // 限制访问：当 expose 数组为空时，父组件无法通过 $refs 访问子组件的任何属性或方法
        expose: [],
        data() {
            return {
                msg: 'asduhasiudha'
            }
        },
    }

    const app = {
        data() {
            return {}
        },
        mounted() {
            // 拿不到 com 组件的属性和方法，因为 expose 配置了空数组
            console.log(this.$refs.aaaa);
        },
        methods: {},
        components: {
            com
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>